<!-- 管理界面的主体 -->
<template>
  <div class="common-layout">
    <el-container>
      <!-- CommonAside -->
      <el-aside :width="!$store.state.isCollapse ? '185px' : '64px'"> <!-- 对侧边栏宽度动态调整 -->
        <common-aside />
      </el-aside>
      <el-container>
        <!-- CommonHeader -->
        <el-header>
          <common-header />
        </el-header>
        <!-- Main -->
        <el-scrollbar> <!-- 替换原生滚动条 -->
          <el-main>
            <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
            <!-- <router-view /> -->
            <router-view v-slot="{ Component }">
              <transition name="fade">
                <div :key="Component">
                  <component :is="Component" />
                </div>
              </transition>
            </router-view>
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import CommonAside from '../../components/CommonAside.vue';
import CommonHeader from '../../components/CommonHeader.vue';
</script>

<style lang="less" scoped>
// fade过渡动画
.fade-enter-active {
  transition: opacity 0.5s ease;
}

//把离开时的开始状态设置为display:none
.fade-leave-from {
  display: none;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.common-layout {
  height: 100%;

  .el-container {
    height: 100%;

    .el-header {
      padding: 0;
    }
  }
}
</style>